<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础配置" name="first">
        <el-form ref="addForm1" :model="addForm" :rules="rules" label-width="110px" class="add-ruleForm">
          <el-divider content-position="left">
            <h4>站点配置</h4>
          </el-divider>
          <el-form-item label="站点名称" prop="title">
            <el-row>
              <el-col :span="15"><el-input
                v-model="systemForm.site_name"
              /></el-col>
            </el-row>
          </el-form-item>
          <el-row>
            <el-col :span="16"> <el-form-item label="站点链接" prop="author"><el-input v-model="systemForm.site_link" /></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="站点关键字" prop="author"><el-input v-model="systemForm.site_keywords" type="textarea" :rows="5" /></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"> <el-form-item label="分类">
              <el-select v-model="systemForm.close_website" placeholder="请选择">
                <el-option
                  label="是"
                  :value="1"
                />
                <el-option label="否" :value="2" />
              </el-select>
            </el-form-item></el-col>
          </el-row>
          <el-divider content-position="left">
            <h4>底部信息</h4>
          </el-divider>
          <el-row>
            <el-col :span="16"> <el-form-item label="备案号" prop="author"><el-input v-model="systemForm.copy_code" /></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="版权信息" prop="author"><el-input
              v-model="systemForm.copy_info"
            /></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="联系方式" prop="author"><el-input v-model="systemForm.phone" /></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="备案链接地址" prop="author"><el-input v-model="systemForm.copy_url" /></el-form-item></el-col>
          </el-row>
          <el-divider content-position="left">
            <h4>其他配置</h4>
          </el-divider>
          <el-row>
            <el-col :span="16"> <el-form-item label="黑名单IP" prop="author"><el-input v-model="systemForm.black_ip" :rows="5" placeholder="黑名单IP，用逗号隔开，注意英文半角逗号" type="textarea" /></el-form-item></el-col>
          </el-row>
          <el-divider />
          <el-form-item>
            <el-button ref="btn1" size="small">保存</el-button>
            <el-button size="small" type="primary">重置</el-button>
          </el-form-item>
        </el-form></el-tab-pane>
      <el-tab-pane label="系统设置" name="second">
        <el-form ref="addForm1" :model="addForm" :rules="rules" label-width="110px" class="add-ruleForm">
          <el-divider content-position="left">
            <h4>管理系统配置</h4>
          </el-divider>
          <el-form-item label="系统名称" prop="title">
            <el-row>
              <el-col :span="15"><el-input /></el-col>
            </el-row>
          </el-form-item>
          <el-row>
            <el-col :span="16"> <el-form-item label="系统logo" prop="author">
              <UpLoader />
            </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="网页图标" prop="author">
              <UpLoader />
            </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="登陆标题" prop="author"><el-input /></el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="登录页背景图" prop="author">
              <UpLoader />
            </el-form-item></el-col>
          </el-row>
          <el-divider />
          <el-form-item>
            <el-button ref="btn1" size="small">保存</el-button>
            <el-button size="small" type="primary">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="其他设置" name="third">
        <el-form ref="addForm1" :model="addForm" :rules="rules" label-width="120px" class="add-ruleForm">
          <el-divider content-position="left">
            <h4>通知公告</h4>
          </el-divider>
          <el-form-item label="公告标题" prop="title">
            <el-row>
              <el-col :span="15"><el-input /></el-col>
            </el-row>
          </el-form-item>
          <el-row>
            <el-col :span="16"> <el-form-item label="通知内容" prop="author"><el-input type="textarea" :rows="5" /></el-form-item></el-col>
          </el-row>
          <el-divider content-position="left">
            <h4>前台图片</h4>
          </el-divider>
          <el-row>
            <el-col :span="16"> <el-form-item label="登录/注册页背景" prop="author">
              <UpLoader />
            </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> <el-form-item label="前台logo" prop="author">
              <UpLoader />
            </el-form-item></el-col>
          </el-row>
          <el-divider />
          <el-form-item>
            <el-button ref="btn1" size="small">保存</el-button>
            <el-button size="small" type="primary">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import UpLoader from '@/components/UpLoader'
import { getconfig } from '@/api/power'
export default {
  components: {
    UpLoader
  },
  data() {
    return {
      editorOption: {
        placeholder: '请输入文本...'
      },
      timer: true,
      activeName: 'first',
      taglist: [],
      catelist: [],
      systemForm: {
      },
      rules: {
        title: [
          { required: true, message: '请输入站点名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Token': this.$store.getters.token
      }
    }
  },
  async created() {
    const res = await getconfig()
    console.log(res)
    this.systemForm = res.configForm
  },
  methods: {
    fileSuccess(response, file, fileList) {
      console.log(response.data.savePath)
      this.addForm.pic = response.data.savePath
      this.addForm.fileList = fileList
      console.log(this.addForm.fileList)
      this.$refs.addForm1.validate()
    },
    fileremove(file, fileList) {
      console.log(fileList, file)
      this.addForm.fileList = fileList
      this.$refs.addForm1.validate()
    }
  }
}
</script>
<style scoped lang="scss">
.add-ruleForm {
  width: 1000px;
  margin: 0 auto;
}
.seo-ruleForm {
  width: 800px;
  margin: 50px 100px;
}
.richtxt {
  position: absolute;
  top: -8px;
  left: 85px;
  width: 1000px;
  height: 200px;
}
.btns {
  height: 100px;
  position: relative;
  top: 240px;
  left: 500px;
}
.lastform {
  position: relative;
  margin: 50px 100px;
  height: 500px;
}
</style>
